<template>
  <div>
    <a-breadcrumb style="margin:20px 0">
      <a-breadcrumb-item href>
        <router-link to="/">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>案例库</a-breadcrumb-item>
    </a-breadcrumb>
    <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">
      <a-list
        item-layout="vertical"
        :grid="{ gutter: 16, md: 4 }"
        size="large"
        :pagination="pagination"
        :data-source="listData"
      >
        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
          <a-card hoverable>
            <img slot="cover" alt="example" :src="item.imgsrc" />
            <a :href="item.url">
              <h2>{{ item.title }}</h2>
            </a>
            <p>
              <a-tag color="cyan">{{ item.explain }}</a-tag>
            </p>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
import axios from "axios";
const listData = [];

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8
      }
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    getList: function() {
      // 获取实例引用
      var that = this;
      // 使用axios库去异步获取远程数据
      axios
        .get("http://api.tianapi.com/txapi/rumour/index", {
          params: {
            key: "02740fcb753b35eff80e7fa788b5818d",
            num: 20
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(response) {
          that.listData = response.data["newslist"];
          // console.log(response.data["newslist"]);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>
